<template>
  <div class="app flex grow">
    <div class="left flex grow column">
      <yn-live ref="live"></yn-live>
      <yn-videoClass ref="videoClass"></yn-videoClass>
    </div>
    <div class="right flex grow column">
      <yn-stock ref="stock"></yn-stock>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      counter: 1,
    };
  },
  watch: {
    counter(num) {
      const oneMinute = 60 * 60;
      const tenMinute = oneMinute * 10;
      if (num % oneMinute === 0) {
        this.oneMinuteRreresh();
      }
      if (num % tenMinute === 0) {
        this.tenMunniteRefresh();
      }
    },
  },
  mounted() {
    this.animationFrameCall();
    document.addEventListener("visibilitychange", () => {
      if (!document.hidden) {
        this.counter = 0;
        this.oneMinuteRreresh();
        this.tenMunniteRefresh();
      }
      this.animationFrameCall();
    });
  },
  methods: {
    animationFrameCall() {
      window.requestAnimationFrame(() => {
        this.counter++;
        this.animationFrameCall();
      });
    },
    oneMinuteRreresh() {
      this.$refs.videoClass.queryShowYeMarketChargeLiveList();
    },
    tenMunniteRefresh() {
      this.$refs.live.broadcastingList();
      this.$refs.stock.showStrategyStockPoolColumn();
    },
  },
};
</script>
<style scoped lang="scss">
.app {
  .left {
    width: 50%;
    height: 100%;
    margin-right: 18px;
  }
  .right {
    width: 50%;
  }
}
</style>
